<template>
  <div class="imsge-components">
    <els-image v-if="!showAll"
               :style="{ height, width }"
               :src="imgUrl"
               :preview-src-list="imgUrlList">
    </els-image>
    <els-image v-else
               v-for="(item, index) in imgUrlList"
               :key="index"
               :style="{ height, width }"
               :src="item"
               :preview-src-list="[item]">
    </els-image>
  </div>
</template>
<script>
import ElImage from "./components/main.vue";
export default {
  components: {
    "els-image": ElImage,
  },
  props: {
    url: {
      type: [String, Array],
      default: "",
    },

    width: {
      type: String,
      default: "40px",
    },

    height: {
      type: String,
      default: "40px",
    },

    showAll: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    url: {
      handler: function (val) {
        if (Object.prototype.toString.call(val) === "[object String]") {
          this.imgUrl = process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + val;
          this.imgUrlList = [process.env.VUE_APP_FILE_URL + val];
        }
        if (Object.prototype.toString.call(val) === "[object Array]") {
          // this.imgUrl = process.env.VUE_APP_FILE_URL + val[0];
          // this.imgUrlList = val.map((item) => {
          //   return process.env.VUE_APP_FILE_URL + item;
          // });
          this.imgUrl = process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + val[0];
          this.imgUrlList = val.map((item) => {
            return process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + item;
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data () {
    return {
      imgUrl: "",
      imgUrlList: [],
    };
  },
};
</script>
<style lang="scss">
.imsge-components {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  .el-image {
    margin: 0 10px 10px 0;
  }
}
</style>
